iT邦幫忙

2023 iThome 鐵人賽

DAY 15
1

DAY 15 - 輕鬆入門 Pinia 狀態管理工具


Pinia 狀態管理工具

接著我們來嘗試運用 Pinia 狀態管理工具,Pinia 官方文件也有提供完整教學也可以去看。

安裝篇 (會的可以跳過

第一次安裝 直接加入 Pinia

  • npm create vue@latest 創建專案
  • Add Pinia for state management? yes

安裝至 Nuxt3 專案

  • npm install pinia @pinia/nuxt
  • 在 nuxt.config.js 文件的 modules 加入 pinia/nuxt


概念篇 / 使用情境

狀態管理工具在初學上最困難的不是如何使用,而是不瞭解為何要使用及使用情境,在初學雖然我會了 pinia ,但是完全無法理解為何要使用跟狀態的運用,對元件溝通技巧更是不理解, 所以學了也是不會使用 = 不會,所以前面我花了蠻多在介紹狀態及狀態管理工具讓大家會更好理解。

下面再搭配這兩張圖,可以看到 Pinia 這類狀態管理工具就像共用資料庫的概念,當我們需要跨元件溝通或是常用的狀態,就可以將它獨立變成 store ,當有需要再取出,也避免元件傳來傳去困擾。



基礎篇 / 如何使用

安裝完 Pinia 後會看到資料夾多了一個 stores,這邊就是我們的狀態管理庫,狀態會統一集中在這邊管理

第一步 、 定義你的 Store - 建立你的 store 名稱

  • 在你的 stores下建立一個 js檔,我們需要在裡面先建立store
  • 先匯入 import { defineStore } from 'pinia'

第二步、定義 state、getters、actions

這是什麼 !? state、getters、actions 對應 ref、computed、methods,別慌!只是名稱不同而已。

  • export const 命名 store 名稱 useCounterStore
  • 再 store 裡定義你的 state、getters、actions,這邊我寫了一個count、計算雙倍 doubleCount、count+1的方法increment

第三步、取出 useCounterStore 裡定義的 state、getters、actions

  • import 匯入useCountstore ,寫入 store
  • 使用 Store 裡的 state、getters、actions (跟一般代入資料一樣)

成功寫入 !! 來看看畫面

今天 Pinia 教學就到這邊結束了,只要了解概念及基礎運用,接下來就可以活用在各式各樣專案中,上面教的寫法是 Setup Store寫法,還有另種寫法是 Option Store 寫法,其實概念上都一樣,可以挑喜歡的寫法寫就好,官方也有提供寫好的範例參考(Option Store) ,想深入了解更實作的運用也可以參考官方


上一篇
DAY 14 - 狀態 (State) & 狀態管理工具
下一篇
DAY 16 - Vue.js 相關工具、套件大集合
系列文
深入 Vue.js 世界 : 30 Days 核心概念與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言